<template>
    <div id="container" style="width: 100%;">
        <div id="Head" >
            <img class="back" src="../../assets/user/userpageback.jpg">
            <div id="Head-Content">
                <div id="avatar-bg">
                    <img :src="user.avatar" class="avatar"/>
                </div>
            </div>

            <div class="Head-Text">
                <span style="white-space: nowrap;">-「  有时候...我们需要的，只是一颗静下来的心。 」</span>
            </div>
            <div class="userinfo">
                <div class="nickname" @click="$router.replace('/index/UserIndexPage/UserIndexDetailPage')">
                    {{ user.nickname }}
                </div>
            </div>
        </div>
        <div id="content-container">
            <div class="dateTime box" style="font-family: cursive;">
                <span class="date" >{{ dateTime.date }}</span>
                <span class="time" style="font-family: UNIDREAMLED;">{{ dateTime.time }}</span>
                <span class="tianqi">{{ dateTime.tianqi }}</span>
            </div>
            <!-- <div class="dateTime box2 box" style="font-family: cursive;">
                <span class="date" >学校：湖南工程职业技术学院</span>
                <span class="date" >学院：信息工程学院</span>
                <span class="date">学号：{{ user.stuId }}</span>
                <span class="date">邮箱：{{ user.email }}</span>
            </div> -->
            <!-- 聊斋管理 -->
            <div class="box box3"
            @click="$router.replace({
                path:'/index/UserIndexPage/lzgl'
            })"
            style="font-family: cursive;">
                <div class="logo">
                    <img src="../../assets/user/lz_logo.png">
                    <div class="content">
                        <span class="dw">个</span>
                        <span class="data">{{ dataCount.lz_total }}</span>
                    </div>
                </div>
                <hr>
                <span class="ds" >我管理的聊斋</span>
            </div>
            <!-- 表白墙数据 -->
            <div class="box box3" 
            @click="$router.replace({
                path:'/index/UserIndexPage/bbqgl'
            })"
            style="font-family: cursive;">
                <div class="logo">
                    <img src="../../assets/user/bbq_logo.png">
                    <div class="content">
                        <span class="dw">条</span>
                        <span class="data">{{ dataCount.bbq_total }}</span>
                    </div>
                </div>
                <hr>
                <span class="ds" >我发布的表白墙</span>
            </div>
            <!-- 照片墙数据 -->
            <div class="box box3"
            @click="$router.replace({
                path:'/index/UserIndexPage/zpqgl',
            })"
            style="font-family: cursive;">
                <div class="logo">
                    <img src="../../assets/user/zzq_logo.png">
                    <div class="content">
                        <span class="dw">条</span>
                        <span class="data">{{ dataCount.zpq_total }}</span>
                    </div>
                </div>
                <hr>
                <span class="ds" >我发布的照片墙</span>
            </div>
        </div>
        <div class="view-container">
            <router-view></router-view>
        </div>
    </div>
</template>

<script>
import axios from 'axios';
import {GETUSERPHOTOWALLDATA,GETUSERBBQDATA,GETUSERLZDATA} from "@/api/user"
export default {
    name: 'SchoolForumIndex',

    data() {
        return {
            user:{},
            timer:null,
            dateTime:{
                time:"",
                date:"",
                tianqi:""
            },
            dataCount:{
                bbq_total:0,
                zpq_total:0,
                lz_total:0
            },
            pageList:{
                photoPage:{
                    current:1,
                    size:7
                },
                bbqPage:{
                    current:1,
                    size:7
                },
                lzPage:{
                    current:1,
                    size:7
                }
            },
        };
    },
    created(){
        // 加载基本数据
        this.init()

    },
    mounted() {
    },
    beforeDestroy(){
        clearInterval(this.timer)
    },
    methods: {
        init(){
            this.user = (this.$store.state.user.user);
            // 天气数据加载
            this.getWeatherInfo()
            // 定时器加载
            this.TimerLoad()
            // 加载聊斋数据
            this.getUserLZData()
            // 加载表白墙数据
            this.getUserBBQDate()
            // 加载照片墙数据
            this.getUserPhotoWallData();
        },
        TimerLoad(){
            var week = new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六")
            this.timer=setInterval(()=>{
                // 加载定时器数据
                var date = new Date();
                this.dateTime.date = date.getFullYear()+" 年 " + (date.getMonth()+1)+" 月 " +date.getDate()+" 日 " +week[date.getDay()]
                if(date.getHours()>=10){
                    this.dateTime.time = date.getHours()+":"
                }else {
                    this.dateTime.time = "0"+date.getHours()+":"
                }
                
                if(date.getMinutes()>=10){
                    this.dateTime.time += date.getMinutes()+":"
                }else {
                    this.dateTime.time += "0"+date.getMinutes()+":"
                }
                if(date.getSeconds()>=10){
                    this.dateTime.time += date.getSeconds()
                }else{
                    this.dateTime.time += "0"+date.getSeconds()
                }
            },1000)
        },
        // 获取湖南省天气
        getWeatherInfo () {
            axios({
                method: 'GET',
                url: 'https://restapi.amap.com/v3/weather/weatherInfo?key=7bdfe695c6a82d213c2e16b8b95a1d3d&city=430000'
            }).then(resp => {
                var weatherinfo = resp.data.lives[0]
                var description = ""
                description+=weatherinfo.province+" " // 地区
                description+=weatherinfo.weather+" " // 气象
                description+=weatherinfo.temperature+'摄氏度'+" " // 温度
                description+=weatherinfo.winddirection+"风" // 风向
                description+=weatherinfo.windpower+"级" // 风力等级
                this.dateTime.tianqi = description

            })
        },
        // 获取个人专属照片数据
        getUserPhotoWallData(){
            GETUSERPHOTOWALLDATA(this.pageList.photoPage.current,this.pageList.photoPage.size).then(res=>{
                this.dataCount.zpq_total = res.total
            })
        },
        // 获取用户专属聊斋数据
        getUserLZData(){
            GETUSERLZDATA(this.pageList.lzPage.current,this.pageList.lzPage.size).then(res=>{
                this.dataCount.lz_total = res.total
            })
        },
        // 获取用户专属表白墙数据
        getUserBBQDate(){
            GETUSERBBQDATA(this.pageList.bbqPage.current,this.pageList.bbqPage.size).then(res=>{
                this.dataCount.bbq_total = res.total
            })
        },
        
    },
};
</script>

<style lang="scss" scoped>

    #container{
        height: 100%;
        width: 100%;
        overflow: auto;
        border-radius:10px ;
        #Head{
            // overflow: hidden;
            height: 45%;
            width: 100%;
            .back{
                height: 100%;
                object-fit: cover;
                width: 100%;
                opacity: 0.8;
                position: relative;
                z-index: 0;
            }
        }
    }
    #Head-Content{
        width: 100%;
        height: 100px;
        display: flex;
        justify-content: center;
        align-items: center;
        #avatar-bg{
            width: 115px;
            height: 115px;
            border-radius: 100%;
            background-color: rgb(255, 255, 255);
            position: relative;
            top: -60px;
            display: flex;
            align-items: center;
            justify-content: center;
            .avatar{
            width: 100px;
            height: 100px;
            border-radius: 100%;
        }
        }
        
    }
    .Head-Text{
        color: rgb(59, 41, 8);
        font-weight: bold;
        font-size: 22px;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        top: -300px;

    }
    .userinfo{
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        .nickname{
            position: relative;
            top: -80px;
            font-weight: bold;
        }
    }
    #content-container{
        // border: 1px solid red;
        margin-top: 80px;
        width: 98%;
    }
    .dateTime{
        display: flex;
        justify-content: center;
        align-items: center;
        flex-flow: column;
        padding: 20px;
        span{
            display: block;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .time{
            font-weight: bold;
            font-size: 40px;
            letter-spacing: 9px;
        }
    }
    #content-container{
        padding-left: 20px;
        display: flex;
        flex-flow: row;
        .box{
            cursor: pointer;
            flex: 1;
            height: 80px;
            font-weight: bold;
            color: rgb(90, 90, 90);
        // border: 1px solid blue;
            box-shadow: 1px 1px 10px rgb(214, 214, 214);
            border-radius: 10px;
        }
        .box2{
            display: flex;
            justify-content: space-around;
            align-items: flex-start;
        }
        .box:hover{
            box-shadow: 1px 1px 10px rgb(225, 167, 167);
        }
        .box{
            margin: 10px;
        }
        .box:nth-child(1){
            margin-left: 0px;
        }
        
        .box:nth-child(4){
            margin-right: 0px;
        }
    }
    .nickname:hover{
        cursor: pointer;
        text-decoration: underline;
    }
    .box3{
       padding: 20px ;
       display: flex;
       flex-flow: column;
       justify-content: space-between;
       .ds{
            font-family: cursive;
            font-size: 18px;
            font-weight: bold;
        }
        .logo{
            display: flex;
            justify-content: space-between;
            img{
                width: 50px;height: 50px;
            }
            .content{
                display: flex;
                flex-flow: column;
                align-items: flex-end;
                .dw{
                    color: gray;
                    font-size: 12px;
                }
                .data{
                    font-size: 40px;
                }
            }
        }
    }
    .view-container{
        // border: 1px solid;
        padding: 20px;
    }

    @media screen and (max-width:1220px){
        .dateTime{display:none; }
    
    }

</style>